import React, { Component } from 'react';
import myorder from '../css/Myorder.module.css'
import { BrowserRouter as Router, Route, NavLink, Redirect } from 'react-router-dom'
import { Button, Input, DatePicker, TreeSelect, Row, Col } from 'antd'

function onChange(date, dateString) {
    console.log(date, dateString);
}
const { TreeNode } = TreeSelect;
export default class Myorder extends Component {
    constructor(props) {
        super(props)
        this.state = {
            value: undefined,
        };
    }
    onChange = value => {
        console.log(value);
        this.setState({ value });
    };
    render() {
        return (
            <div>
                <div className={myorder.main}>
                    <div className={myorder.maincenter}>
                        <div className={myorder.mainorder}>
                            <div className={myorder.maintop}>
                                <h2>商城订单</h2>
                                <ul>
                                    <li>
                                        <b>订单号：</b><Input placeholder="订单号查询" />
                                    </li>
                                    <li>
                                        <b>开始：</b><DatePicker onChange={onChange} />
                                    </li>
                                    <li>
                                        <b>结束：</b><DatePicker onChange={onChange} />
                                    </li>
                                    <li>
                                        <TreeSelect
                                            style={{ width: 300 }}
                                            value={this.state.value}
                                            dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
                                            placeholder="全部订单"
                                            allowClear
                                            treeDefaultExpandAll
                                            onChange={this.onChange}
                                        >
                                            <TreeNode value=" 全部订单" title="全部订单 " key="1"></TreeNode>
                                            <TreeNode value=" 待付款" title="待付款" key="2"></TreeNode>
                                            <TreeNode value=" 已取消" title="已取消" key="3"></TreeNode>
                                            <TreeNode value=" 代发货" title="代发货" key="4"></TreeNode>
                                            <TreeNode value=" 已发货" title="已发货" key="5"></TreeNode>
                                            <TreeNode value=" 已完成" title="已完成" key="6"></TreeNode>
                                        </TreeSelect>
                                    </li>
                                </ul>
                                <div className={myorder.mainbutton}>
                                    <Button type="primary">搜索</Button>
                                </div>
                            </div>
                            <span className={myorder.xian}></span>
                            <div className={myorder.mainbottom}>
                                <div className={myorder.ding}>
                                    <div className={myorder.dingx}>
                                        <Row className={myorder.row} >
                                            <Col span={8} className={myorder.shangp}>商品</Col>
                                            <Col span={8} className={myorder.shangp1}>
                                                <Col span={6} >数量</Col>
                                                <Col span={6} >单价</Col>
                                                <Col span={6} >退换货</Col>
                                                <Col span={6} >评价</Col>
                                            </Col>
                                            <Col span={8} >
                                                <Col span={8} >实付款</Col>
                                                <Col span={8} >物流</Col>
                                                <Col span={8} >操作</Col>
                                            </Col>
                                        </Row>
                                        <div className={myorder.myding}>
                                            <h5>
                                                订单号：13281562848694593741
                            <span>2019-07-11 20:38:14</span>
                                            </h5>
                                            <Row className={myorder.row1} >
                                                <Col span={8} className={myorder.shangp}>
                                                    <Col span={12} ><img src="http://image.fast.126net.cn/group2/M00/01/C2/wKgADlvWqBCANCvuAAAkeEomvDw602.jpg" /></Col>
                                                    <Col span={12} className={myorder.erf} >
                                                        <Col span={24} >
                                                            优必选阿尔法Alpha 1P智能机器人玩</Col>
                                                        <Col span={24} >
                                                            默认</Col>
                                                    </Col>
                                                </Col>
                                                <Col span={8} className={myorder.shangp1}>
                                                    <Col span={6} >3,999.00</Col>
                                                    <Col span={6} >1</Col>
                                                    <Col span={6} >不可退货</Col>
                                                    <Col span={6} >评价</Col>
                                                </Col>
                                                <Col span={8} >
                                                    <Col span={8} >3，900.00</Col>
                                                    <Col span={8} >未发货</Col>
                                                    <Col span={8} className={myorder.erf1}>
                                                        <Col span={24} onClick={this.order.bind(this)}>订单详情</Col>
                                                        <Col span={24} >立即支付</Col>
                                                        <Col span={24} >取消订单</Col>
                                                    </Col>
                                                </Col>
                                            </Row>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
    order(){
        this.props.history.push('/orderdetail')
    }
}